<template>
    <div>
        <!-- 运营档案-驾驶员档案 -->
        <el-row>
            <el-col :span="24">
                <div class="container">
                    <el-row class="head-fun">
                        <el-col :span="24">
                            <div class="lf choose-title">姓名</div>
                            <el-input v-model="name" size="mini" style="width:150px" class="choose-input lf"></el-input>
                            <div class="lf choose-title">从业证号</div>
                            <el-input v-model="congNum" size="mini" style="width:150px" class="choose-input lf"></el-input>
                            <div class="lf choose-title">驾驶证号</div>
                            <el-input v-model="driveNum" size="mini" style="width:150px" class="choose-input lf"></el-input>
                            <button class="check-btn rf custom-btn" @click="check"><img src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询</button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24" class="table-fun">
                            <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="refresh">刷新</div>
                            <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="add">添加</div>
                            <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="modify">修改</div>
                            <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="del">删除</div>
                            <img src="../../assets/imgs/operation_icon_shuju_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="tongbu">同步数据中心</div>
                        </el-col>
                    </el-row>
                    <!-- 表格数据 -->
                    <el-row>
                      <el-col :span="18">
                          <avue-crud :data="driverList[0].data" :option="driverList[0].option" @current-row-change="rowChange" :page="driverList[0].page" @current-change="driverPage"></avue-crud>
                      </el-col>
                      <el-col :span="6" class="right-container">
                        <div class="choose-title carTable-right rightbox">到期证件</div>
                          <div class="choose-title" @click="daoQiShow=true"><img src="../../assets/imgs/lnput_icon_yiwen_default.png" alt=""> 到期提醒 |</div>
                          <avue-crud :data="overTimeList.data" :option="overTimeList.option" :page="overTimeList.page" @current-change="overPage"></avue-crud>
                      </el-col>
                    </el-row>
                    
                    
                </div>
                <!-- 修改弹窗 -->
                <div class="modal-win" v-show="modifyShow">
                    <div class="closeWin" @click="closeModWin">X</div>
                    <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf modImg">
                    <div class="lf add-text">{{popTitle}}</div>
                    <div class="cb"></div>
                    <img src="../../assets/imgs/operation_bg_sousuo_default.png" alt="" class="lf search-logo">
                    <div class="lf load-text">读取从业资格证信息</div>
                    <div class="cb"></div>
                    <!-- 表单栏 -->
                    <div class="form-container">
                        <el-row>
                            <el-col :span="12">
                                <div class="lf mod-text">姓名</div>
                                <el-input v-model="modName" placeholder="" class="lf mod-input" style="width:110px" size="mini"></el-input>
                                <div style="width:100px"></div>
                                <el-select v-model="modSex" placeholder="" size="mini" class="rf mod-input" style="width:110px">
                                <el-option label="男" value="male"></el-option>
                                <el-option label="女" value="female"></el-option>
                                </el-select>
                                <div class="rf mod-text">性别</div>
                                <div class="cb"></div>
                                <div class="lf mod-text">IC卡卡号</div>
                                <el-input v-model="modIC" placeholder="" class="lf mod-input4" size="mini" style="width:395px"></el-input>
                                <div class="cb"></div>
                                <div class="lf mod-text">身份证地址</div>
                                <el-input v-model="modPlace" placeholder="" class="lf mod-input4" size="mini" style="width:380px"></el-input>
                                <div class="cb"></div>
                                <div class="lf mod-text">出身日期</div>
                                 <el-date-picker
                                    v-model="modDate"
                                    type="date"
                                    placeholder="" class="lf mod-input4" style="width:110px;" size="mini">
                                </el-date-picker>
                                <div style="width:100px"></div>
                                <el-input v-model="modEmail" placeholder="" class="rf mod-input" style="width:110px" size="mini"></el-input>
                                <div class="rf mod-text">电子邮箱</div>
                            </el-col>
                            <el-col :span="11" :offset="1">
                                <div class="lf mod-text">民族</div>
                                <el-input v-model="modMingZu" placeholder="" class="lf mod-input" style="width:110px" size="mini"></el-input>
                                <el-input v-model="modPhone" placeholder="" class="rf mod-input4" style="width:110px" size="mini"></el-input>
                                <div class="rf mod-text">联系电话</div>
                                <div class="cb"></div>
                                <div class="lf mod-text">身份证号</div>
                                <el-input v-model="modIdenty" placeholder="" class="lf mod-input4" style="width:350px" size="mini"></el-input>
                                <div class="lf mod-text">从业证号</div>
                                <el-input v-model="modJobID" placeholder="" class="lf mod-input4" style="width:350px" size="mini"></el-input>
                                <div class="lf mod-text">有效期</div>
                                <el-input v-model="modOverDate" placeholder="" class="lf mod-input3" style="width:110px" size="mini"></el-input>
                                <el-input v-model="modDriveType" placeholder="" class="rf mod-input4" style="width:110px" size="mini"></el-input>
                                <div class="rf mod-text">准驾类型</div>
                                <div class="cb"></div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="17">
                                <div class="lf mod-text">从业资格类别</div>
                                <el-input v-model="modjobType" placeholder="" class="lf mod-input4" style="width:562px" size="mini"></el-input>
                                <div class="lf mod-text">从业证发放机构</div>
                                <el-input v-model="modSendPlace" placeholder="" class="lf mod-input4" style="width:546px" size="mini"></el-input>
                                <div class="lf mod-text">驾驶证号</div>
                                <el-input v-model="modCarID" placeholder="" class="lf mod-input4" style="width:350px" size="mini"></el-input>
                                <el-input v-model="modDriveAge" placeholder="" class="rf mod-input" style="width:110px" size="mini"></el-input>
                                <div class="rf mod-text">驾龄</div>
                                <div class="lf mod-text">驾驶证起始日期</div>
                                <el-date-picker
                                    v-model="modDStartDate"
                                    type="date"
                                    placeholder="" class="lf mod-input7" style="width:110px;" size="mini">
                                </el-date-picker>
                                <div class="lf mod-text">驾驶证有效日期</div>
                                <el-date-picker
                                    v-model="modDRightDate"
                                    type="date"
                                    placeholder="" class="lf mod-input7" style="width:110px;" size="mini">
                                </el-date-picker>
                                <div class="lf mod-text">技术职称</div>
                                <el-input v-model="modTName" placeholder="" class="lf mod-input4" style="width:110px" size="mini"></el-input>
                                <div class="lf mod-text">服务单位名称</div>
                                <el-input v-model="modServePlace" placeholder="" class="lf mod-input4" style="width:562px" size="mini"></el-input>
                            </el-col>
                            <el-col :span="6" :offset="1">
                                <el-input v-model="modAllowCar" placeholder="" class="rf mod-input4" style="width:110px" size="mini"></el-input>
                                <div class="rf mod-text">准驾车型</div>
                                <el-input v-model="modPID" placeholder="" class="rf mod-input4" style="width:110px" size="mini"></el-input>
                                <div class="rf mod-text">职业证号</div>
                                <el-date-picker
                                    v-model="modPDate"
                                    type="date"
                                    placeholder="" class="rf mod-input4" style="width:110px;" size="mini">
                                </el-date-picker>
                                <div class="rf mod-text">职业证有效期</div>
                                <el-date-picker
                                    v-model="modPDateII"
                                    type="date"
                                    placeholder="" class="rf mod-input4" style="width:100px;" size="mini">
                                </el-date-picker>
                                <div class="rf mod-text">驾驶证办理日期</div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <button class="check-btn rf" @click="close">
                                    <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">
                                    取消</button>
                                    <button class="check-btn rf" @click="sendMod"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">
                                    确定</button>
                            </el-col>
                        </el-row>
                        
                    </div>
                        
                </div>
            </el-col>
        </el-row>
        <!-- 同步弹窗 -->
        <div class="tong-win" v-show="tongbuShow">
            <div class="tongbu-text">同步中心数据</div><div class="closeWin" @click="tongbuShow=false">X</div>
            <avue-crud :data="tongbuList[0].data" :option="tongbuList[0].option" @current-row-change="rowChange" class="unit-table" @current-change="driverPage" :page="tongbuList[0].page"></avue-crud>
        </div>
        <!-- 到期弹窗 -->
        <div class="daoqi-win" v-show="daoQiShow">
            <div class="tongbu-text">到期提醒设置</div><div class="closeWin" @click="daoQiShow=false">X</div>
             <el-checkbox-group v-model="daoZhanCheckList">
              <el-checkbox  label="从业证有效期" class="check-item"></el-checkbox><br>
              <el-checkbox  label="职业证有效期"  class="check-item"></el-checkbox><br>
              <el-checkbox  label="驾驶证有效期"  class="check-item"></el-checkbox><br>
            </el-checkbox-group>
            <button class="check-btn rf" @click="daoQiShow=false">
            <img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
            <button class="check-btn rf custom-btn" @click="checkSure"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确定</button>
        </div>
    </div>
</template>

<script>
import qs from "qs";
import TableData from "../../components/common/tableData"
export default {
  data: function() {
    return {
      activeTag:"4-3",
      name: "",
      congNum: "",
      driveNum: "",
      tongbuShow:false,
      tongbuList: [
        {
           page: {
            pageSizes: [5],
            total: 2,
            currentPage: 1,
            pageSize: 10
          },
          data: [],
          option: {
            highlightCurrentRow:true,
            page: true,
            stripe: true,
            menu: false,
            align: "center",
            menuAlign: "center",
            column: []
          }
        }
      ],
      driverList: [
        {
           page: {
            pageSizes: [10],
            total: 2,
            currentPage: 1,
            pageSize: 10
          },
          data: [],
          option: {
            highlightCurrentRow:true,
            page: true,
            stripe: true,
            menu: false,
            align: "center",
            menuAlign: "center",
            column: []
          }
        }
      ],
      dlRules: {
        sort: "name",
        order: "asc",
        page: "1",
        rows: "30",
        delId: "1",
        tongbuRules: {
          sort: "name",
          order: "desc",
          page: "1",
          rows: "30"
        }
      },
      modifyShow: false,
      modName: "",
      modSex: "",
      modIC: "",
      modPlace: "",
      modDate: "",
      modEmail: "",
      modMingZu: "",
      modPhone: "",
      modIdenty: "",
      modJobID: "",
      modOverDate: "",
      modDriveType: "",
      modjobType: "",
      modSendPlace: "",
      modCarID: "",
      modDriveAge: "",
      modDStartDate: "",
      modDRightDate: "",
      modTName: "",
      modServePlace: "",
      modAllowCar: "",
      modPID: "",
      modPDate: "",
      modPDateII:"",
      currentRow:"",
      tag:0,
      popTitle:"",
      daoQiShow:false,
      daoZhanCheckList:[],
      overTimeList:{
        page: {
          pageSizes: [10],
          total: 20,
          currentPage: 1,
          pageSize: 10,
        },
        data:[],
        option:{
          menu:false,
          column:[
            {
              label:"姓名",
              prop:"driver_name"
            },
            {
              label:"",
              prop:"expire_date"
            },
            {
              label:"",
              prop:"job_cardno"
            },
          ]
        }
      }
    };
  },
  methods: {
    check(){
      this.postRequest("/sch/data/driver/list",{
        filterRules:JSON.stringify([
          {"field":"name","op":"cn","value":this.name},{"field":"job_cardno","op":"cn","value":this.congNum},{"field":"driving_license_no","op":"cn","value":this.driveNum}
        ])
      }).then(data=>{
        this.driverList[0].data=data.data.list;
      });
    },
    overPage(val){
      this.overTimeList.page.currentPage=val;
      this.getoverTimeList();
    },
    getoverTimeList(){
      this.postRequest("/sch/data/driver/expire/list",{
        rows:10,
        page:this.overTimeList.page.currentPage
      }).then(data=>{
        this.overTimeList.page.total=data.data.totalRow
        this.overTimeList.data=data.data.list
      })
    },
    driverPage(val){
      this.driverList[0].page.currentPage=val;
      if(this.tag==0){
        this.getDriverList();
      }else{
        this.tongbu();
      }
    },
    getDriverList() {
      this
        .postRequest(
          "/sch/data/driver/list",{
            rows:10,
            page:this.driverList[0].page.currentPage
          }
        )
        .then(data => {
          console.log(data);
          this.driverList[0].page.total=data.data.totalRow;
          this.driverList[0].data=data.data.list;
        });
    },
    refresh() {
      this.getDriverList();
      this.tag=0;
    },
    add() {
      this.popTitle="添加";
      this.modifyShow=true;
      this.modName="";
      this.modSex="";
      this.modMingZu="";
      this.modPhone="";
      this.modIC="";
      this.modDate="";
      this.modPlace="";
      this.modEmail="";
      this.modJobID="";
      this.modOverDate="";
      this.modjobType="";
      this.modSendPlace="";
      this.modAllowCar="";
      this.modPID="";
      this.modDRightDate="";
      this.modCarID="";
      this.modDRightDate="";
      this.modDriveAge="";
      this.modPDate="";
      this.modDStartDate="";
      this.modDRightDate="";
      this.modTName="";
      this.modServePlace="";
      this
        .getRequest(
          "/sch/data/driver/add?driver.id=&driver.name="+this.modName+"&driver.sex="+this.modSex+"&driver.nation="+this.modMingZu+"&driver.phone="+this.modPhone+"&driver.iccard_no=9988&driver.idcard_no="+this.modIC+"&driver.birthday="+this.dateToString(this.modDate)+"&driver.idcard_adderss="+this.modPlace+"&driver.email="+this.modEmail+"&driver.job_cardno="+this.modJobID+"&driver.job_card_validdate="+this.dateToString(this.modOverDate)+"&driver.job_category="+this.modjobType+"&driver.job_brgname="+this.modSendPlace+"&driver.can_drive_vehi_type="+this.modAllowCar+"&driver.occupation_card_no="+this.modPID+"&driver.occupation_card_validdate="+this.dateToString(this.modDRightDate)+"&driver.driving_license_no="+this.modCarID+"&driver.driving_age="+this.modDriveAge+"&driver.driving_license_date="+this.dateToString(this.modPDate)+"&driver.driving_license_begindate="+this.dateToString(this.modDStartDate)+"&driver.driving_license_validdate="+this.dateToString(this.modDRightDate)+"&driver.technical_title="+this.modTName+"&driver.customer_name="+this.modServePlace
        )
        .then(data => {
          console.log(data);
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getDriverList();
            this.modifyShow=false;
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    del() {
      this
        .postRequest(
          "/sch/data/driver/del",{id:this.currentRow.id}
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.refresh();
          } else {
            this.$message.error("删除失败");
          }
        });
    },
    tongbu() {
      this.tongbuShow=true;
      this
        .postRequest(
          "/sync/center/data/base/driver",
          {
            rows:5,
            page:this.tongbuList[0].page.currentPage
          }
        )
        .then(data => {
          this.tongbuList[0].page.total=data.data.totalRow;
          this.tongbuList[0].data = data.data.list;
          this.tag=1;
        });
    },
    modify() {
      this.popTitle="修改";
      this.modifyShow = true;
      this.getRequest("/sch/data/driver/update?driver.id=&driver.name="+this.modName+"&driver.sex="+this.modSex+"&driver.nation="+this.modMingZu+"&driver.phone="+this.modPhone+"&driver.iccard_no=9988&driver.idcard_no="+this.modIC+"&driver.birthday="+this.dateToString(this.modDate)+"&driver.idcard_adderss="+this.modPlace+"&driver.email="+this.modEmail+"&driver.job_cardno="+this.modJobID+"&driver.job_card_validdate="+this.dateToString(this.modOverDate)+"&driver.job_category="+this.modjobType+"&driver.job_brgname="+this.modSendPlace+"&driver.can_drive_vehi_type="+this.modAllowCar+"&driver.occupation_card_no="+this.modPID+"&driver.occupation_card_validdate="+this.dateToString(this.modDRightDate)+"&driver.driving_license_no="+this.modCarID+"&driver.driving_age="+this.modDriveAge+"&driver.driving_license_date="+this.dateToString(this.modPDate)+"&driver.driving_license_begindate="+this.dateToString(this.modDStartDate)+"&driver.driving_license_validdate="+this.dateToString(this.modDRightDate)+"&driver.technical_title="+this.modTName+"&driver.customer_name="+this.modServePlace).then(data=>{
        this.msgShow(data,function(){
          this.modifyShow=false;
        });
      });
    },
    checkSure(){
      this.daoQiShow=false;
    },
    rowChange(val){
      this.currentRow=val;
      console.log(val);
      this.modName=val.name;
      this.modSex=val.sex;
      this.modIC=val.iccard_no;
      this.modPlace=val.idcard_adderss;
      this.modDate=val.birthday;
      this.modEmail=val.email;
      this.modMingZu=val.nation;
      this.modPhone=val.phone;
      this.modIdenty=val.idcard_no;
      this.modJobID=val.job_cardno;
      this.modOverDate=val.job_card_validdate;
      this.modDriveType=val.can_drive_vehi_type;
      this.modjobType=val.job_category;
      this.modSendPlace=val.job_brgname;
      this.modCarID=val.driving_license_no;
      this.modDriveAge=val.driving_age;
      this.modDStartDate=val.driving_license_begindate;
      this.modDRightDate=val.driving_license_validdate;
      this.modTName=val.technical_title;
      this.modServePlace=val.customer_name;
      this.modAllowCar=val.can_drive_vehi_type;
      this.modPID=val.occupation_card_no;
      this.modPDate=val.occupation_card_validdate;
      this.modPDateII=val.driving_license_begindate;
    },
    close() {
      this.modifyShow = false;
    },
    sendMod() {
      this
        .getRequest(
          "/sch/data/driver/update?driver.id="+this.currentRow.id+"&driver.name="+this.modName+"&driver.nation="+this.modMingZu+"&driver.phone="+this.modPhone+"&driver.iccard_no="+this.modIC+"&driver.idcard_no="+this.modIdenty+"&driver.birthday="+this.modDate+"&driver.idcard_adderss="+this.modIC+"&driver.email="+this.modEmail+"&driver.job_cardno="+this.modJobID+"&driver.job_card_validdate="+this.dateToString(this.modOverDate)+"&driver.job_category="+this.modjobType+"&driver.job_brgname="+this.modSendPlace+"&driver.can_drive_vehi_type="+this.modAllowCar+"&driver.occupation_card_no=&driver.occupation_card_validdate=&driver.driving_license_no="+this.modCarID+"&driver.driving_age="+this.modDriveAge+"&driver.driving_license_date="+this.dateToString(this.modPDate)+"&driver.driving_license_begindate="+this.dateToString(this.modDStartDate)+"&driver.driving_license_validdate="+this.dateToString(this.modDRightDate)+"&driver.technical_title="+this.modTName+"&driver.customer_name="+this.modServePlace
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.modifyShow = false;
          } else {
            this.$message.error("修改失败");
          }
        });
    },
    closeModWin(){
      this.modifyShow=false;
    },
    tableCreate() {
      this.tongbuList[0].option.column.push(
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "性别",
          prop: "sex"
        },
        {
          label: "出生日期",
          prop: "birthday"
        },
        {
          label: "从业证号",
          prop: "job_cardno"
        },
        {
          label: "从业证有效日期",
          prop: "card_date"
        },
        {
          label: "驾驶证号",
          prop: "idcard_no"
        },
        {
          label: "驾驶证有效期",
          prop: "occupation_card_validdate"
        },
        {
          label: "职业证有效期",
          prop: "job_card_validdate"
        },
      );
      this.driverList[0].option.column.push(
        {
          label: "姓名",
          prop: "name"
        },
        {
          label: "性别",
          prop: "sex"
        },
        {
          label: "出生日期",
          prop: "birthday"
        },
        {
          label: "从业证号",
          prop: "job_cardno"
        },
        {
          label: "从业证有效日期",
          prop: "card_date"
        },
        {
          label: "驾驶证号",
          prop: "idcard_no"
        },
        {
          label: "驾驶证有效期",
          prop: "occupation_card_validdate"
        },
        {
          label: "职业证有效期",
          prop: "job_card_validdate"
        },
      );
    },
  },
  computed: {},
  components:{TableData},
  watch: {},
  mounted() {
    console.log("driveList");
    this.$emit("sendActive",this.activeTag);
    this.tableCreate();
    this.getDriverList();
    this.getoverTimeList();
  }
};
</script>
<style scoped src="../../assets/css/service/driverList.css">

</style>